<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-13 14:22:02
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-20 15:45:21
 * @FilePath: \ProtocolTool\src\renderer\src\components\TitleBar\index.vue
-->
<script lang="ts" setup>
import { MinusOutlined, CloseOutlined } from '@ant-design/icons-vue'

defineProps({
  title: {
    type: String,
    default: '地球物理专用设备网络通讯协议合规检测工具'
  }
})

// 最小化
const minimize = () => {
  window.api.minimize()
}
// 关闭
const close = () => {
  window.api.close()
}
</script>

<template>
  <div class="title-bar">
    <div class="title">
      <div class="logo">
        <img src="@/assets/logo.png" alt="logo" />
      </div>
      <div class="title-text">{{ title }}</div>
    </div>
    <div class="opt">
      <div class="opt-item" @click="minimize">
        <MinusOutlined />
      </div>
      <div class="opt-item" @click="close">
        <CloseOutlined />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.title-bar {
  position: relative;
  z-index: 9999;
  -webkit-app-region: drag;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding-left: 10px;

  .title {
    display: flex;
    align-items: center;
    font-size: 14px;

    .logo {
      width: 24px;
      height: 24px;
      margin-right: 6px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .opt {
    display: flex;
    -webkit-app-region: no-drag;

    .opt-item {
      width: 38px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        cursor: pointer;
        background: #ffffff33;
      }
    }
  }
}
</style>
